<template>
    <div class="preview-container">
        <div
            class="preview-wrapper"
            v-bind="{
                style: canvasWH,
            }">
            <div
                class="cpn-wrapper"
                v-for="item in screenCpnsState.screenCpns"
                v-bind="{
                    key: item.id,
                    style: {
                        width: `${item.canvas.wh.w}px`,
                        height: `${item.canvas.wh.h}px`,
                        left: `${item.canvas.xy.x}px`,
                        top: `${item.canvas.xy.y}px`,
                        zIndex: item.canvas.z,
                    },
                }">
                <RenderCpn :cpnInfo="item"></RenderCpn>
            </div>
        </div>
    </div>
	
</template>
<script setup>
import RenderCpn from "@/views/LowCode/components/RenderCpn/RenderCpn.vue";
import { computed } from "vue";
import { useSketchRuleStore } from "@/stores/sketchRule";
import { useScreenCpnsStore } from "@/stores/screenCpns";
import { storeToRefs } from "pinia";
const sketchRuleStore = useSketchRuleStore();
const ScreenCpnsStore = useScreenCpnsStore();
const { sketchRuleState } = storeToRefs(sketchRuleStore);
const { screenCpnsState } = storeToRefs(ScreenCpnsStore);
let props = defineProps({});
const canvasWH = computed(() => {
	return {
		width: sketchRuleState.value.rulerOpts.canvasWidth + "px",
		height: sketchRuleState.value.rulerOpts.canvasHeight + "px",
        backgroundColor: sketchRuleState.value.canvasOpts.canvasBgColor 
	};
});
</script>
<style scoped lang="scss">
.preview-container {
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
    .preview-wrapper {
        position: relative;
        .cpn-wrapper {
            position: absolute;
        }
    }
}

</style>
